<template>
    <el-dialog :draggable="true" :destroy-on-close="true" top="6vh" :model-value="checkDialog" @close="onCancel"
        :close-on-click-modal="false" title="配件费用详情" width="80%" class="check-dialog">
        <div v-loading="loading" element-loading-text="加载中...">
            <h4 class="title_top">基本信息</h4>
            <div class="table-detail">
                <el-form class="form_detail" v-if="detailData">
                    <div>
                        <el-form-item label="申请编码:">{{ detailData.code }}</el-form-item>
                        <el-form-item label="关联工单:">{{ detailData.workNo }}</el-form-item>
                        <el-form-item label="费用状态:">{{ options[detailData.status - 1].name }}</el-form-item>
                    </div>
                    <div>
                        <el-form-item label="申请类型:">{{ options6[detailData.applyEmpType - 1].name }}</el-form-item>
                        <el-form-item label="申请人员:">{{ detailData.applyEmp }}</el-form-item>
                        <el-form-item label="配件收货地址:">{{ detailData.receiptName }} &nbsp;{{ detailData.receiptPhone
                        }}&nbsp;{{ detailData.receiptProvince }}{{ detailData.receiptCity
}}{{ detailData.receiptArea }}{{ detailData.receiptTown }}{{ detailData.receiptAddress
}}</el-form-item>
                    </div>
                    <div>
                        <el-form-item label="申请时间:">{{ detailData.createTime }}</el-form-item>
                        <el-form-item label="审批时间:">{{ detailData.reviewTime }}</el-form-item>
                        <el-form-item label="申批人员:">{{ detailData.reviewEmp }}</el-form-item>

                    </div>
                </el-form>
            </div>
            <h4 class="title_top" v-if="detailData?.oldCopeWay">旧件信息</h4>
            <div class="table-detail" v-if="detailData?.oldCopeWay">
                <el-form class="form_detail" v-if="detailData">
                    <div>
                        <div class="dis_f">
                            <el-form-item label="旧件处理:">{{ options7[detailData.oldCopeWay - 1]?.name }}</el-form-item>
                            <el-form-item v-if="detailData.oldCopeWay==2" class="mag-l" label="退回仓库:">{{ detailData.store }}</el-form-item>
                        </div>
                        <el-form-item label="旧件收货信息:" v-if="detailData.oldCopeWay==2">{{ detailData.oldReceiptName }} &nbsp;{{ detailData.oldReceiptPhone
                        }}&nbsp;{{ detailData.oldReceiptProvince }}{{ detailData.oldReceiptCity
}}{{ detailData.oldReceiptArea }}{{ detailData.oldReceiptTown }}{{ detailData.oldReceiptAddress
}}</el-form-item>
                    </div>
                </el-form>
            </div>
            <el-tabs v-model="activeName" class="table-detail" @tab-change="handleClick">
                <el-tab-pane label="配件物料" name="first">
                    <el-table :border="true" stripe resizable max-height="350px" :data="feeDetails">
                        <template #empty>
                            <el-empty description="暂无数据" :image-size="60" />
                        </template>
                        <el-table-column show-overflow-tooltip label="序号" type="index" fixed="left" min-width="50" align="center" />
                        <el-table-column show-overflow-tooltip prop="name" label="审核状态" width="80">
                            <template v-slot="i">
                                <span v-for="(item, ik) in options" :key="ik" v-show="item.value === i.row.status">{{ item.name }}</span>                                
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="date" label="结算类型" width="100">
                            <template v-slot="i">
                                <span v-for="(item, ik) in options1" :key="ik" v-show="item.value === i.row.type">{{ item.name }}</span>                                
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="name" label="申请的物料" width="180" >
                            <template v-slot="i">
                              <span>{{ i.row.applySpareModel }}&nbsp;{{ i.row.applySpareSpec }}&nbsp;{{ i.row.applySpareSpecCode }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="name" label="审核后的物料" width="180" >
                            <template v-slot="i">
                              <span>{{ i.row.checkSpareModel }}&nbsp;{{ i.row.checkSpareSpec }}&nbsp;{{ i.row.checkSpareSpecCode }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="qty" label="数量" width="80" align="center" />
                        <el-table-column show-overflow-tooltip prop="price" label="单价" width="90" align="center" >
                            <template v-slot="i">
                                ￥{{ i.row.price.toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip label="总金额" width="100" align="center">
                            <template v-slot="i">
                                ￥{{ (i.row.price*i.row.qty).toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="store" label="出库仓库" width="120" />
                        <el-table-column show-overflow-tooltip prop="remark" label="备注" width="170" />
                        <el-table-column prop="city" label="附件" width="460">
                            <template v-slot="scope">
                                <div class="disf_ipc">
                                    <p v-for="img in scope.row.images" :key="img.id">
                                        <img class="img" :src="pdf" style="width: 100%;cursor: pointer"
                                            v-if="(img.image.replace(/.+\./, '') == 'pdf')"
                                            @click="handlePictureCardPreview(img.image, true)">
                                        <img class="img" @click="handlePictureCardPreview(img.image, false)"
                                            :src="img.image" v-else />
                                    </p>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="出库记录" name="second">
                    <el-table :border="true" stripe height="300px" resizable :data="tableData2">
                        <template #empty>
                            <el-empty description="暂无数据" :image-size="60" />
                        </template>
                        <el-table-column show-overflow-tooltip prop="name" label="状态" width="200" />
                        <el-table-column show-overflow-tooltip prop="date" label="单据编码" width="120" />
                        <el-table-column show-overflow-tooltip prop="date" label="收付类型" width="100" />
                        <el-table-column show-overflow-tooltip prop="city" label="总金额" width="120" />
                        <el-table-column show-overflow-tooltip prop="state" label="结算方" width="100" />
                        <el-table-column show-overflow-tooltip prop="city" label="结算时间" width="170" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="操作日志" name="third">
                    <el-table :border="true" stripe resizable max-height="350px" :data="detailDataLog">
                        <template #empty>
                            <el-empty description="暂无数据" :image-size="60" />
                        </template>
                        <el-table-column label="序号" type="index" fixed="left" width="50" align="center" />
                        <el-table-column show-overflow-tooltip prop="createEmp" label="操作人" width="140" />
                        <el-table-column show-overflow-tooltip prop="event" label="操作事件" width="240" />
                        <el-table-column show-overflow-tooltip prop="content" label="备注" min-width="220" />
                        <el-table-column prop="createTime" label="时间" width="150" />
                    </el-table>
                    <div class="pagination">
                        <Pagination ref="pagination" :list_total="totalList" @size-change="getOrderSpareLogList()"
                            @current-change="getOrderSpareLogList()" />
                    </div>
                </el-tab-pane>
            </el-tabs>
            <div class="footer_btn">
                <el-button @click="onCancel" class="btn_cancel"> 关闭 </el-button>
            </div>
        </div>
    </el-dialog>
    <el-dialog v-model="dialogVisible" draggable title="查看附件" top="8vh" style="background-color: #f0f0f0;">
        <iframe :src="`${dialogImageUrl}`" style="height: 660px;width: 100%;" frameborder="0" v-if="isPdf"></iframe>
        <img w-full :src="dialogImageUrl" v-else />
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, toRefs, onMounted } from 'vue'
// import { OrderSpareDetailProjectInfo, getOrderSpareMaterial, OrderSpareLogList } from '../../../../api/parts'
import Pagination from '@/components/Pagination/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import pdf from '@/assets/image/pdf.png'
const props = defineProps({
    checkDialog: Boolean,
    partsId: String,
    workNo: String,
    feeNo: String,
})
const { checkDialog, partsId } = toRefs(props)
const loading = ref(false)
const tableData2 = []
const detailData = ref(null)
const detailDataLog = ref(null)
const activeName = ref('first')
const feeDetails = ref(null)
const dialogVisible = ref(false)
const dialogImageUrl = ref(null)
const totalList = ref(0)
const pagination = ref()
const emits = defineEmits(['assign-dialog', 'update-list'])
// 结算类型
const options1 = [{ name: '向服务商收取', value: 1 }, { name: '向服务商支付', value: 2 }, { name: '向客户收取', value: 3 }, { name: '向客户支付', value: 4 }]
const options = [{ value: 1, name: '待审核' }, { value: 2, name: '已通过' }, { value: 3, name: '已驳回' }, { value: 4, name: '已撒回' }, { value: 5, name: '已取消' }]
const options7 = [{ name: '废弃', value: 1 }, { name: '旧件退回', value: 2 }]
const options6 = [{ name: '平台配件', value: 1 }, { name: '服务商配件', value: 2 }]

const isPdf = ref(false)
// 获取详情
const getOrderSpareDetailProjectInfo = async (id) => {
    loading.value = true
    // await OrderSpareDetailProjectInfo(id).then(res => {
    //     if (res.data.success) {
    //         detailData.value = res.data.data.row
    //     } else {
    //         ElMessage({
    //             showClose: true,
    //             message: res.data.message,
    //             duration: 4000,
    //             offset: 200,
    //             type: 'error'
    //         })
    //     }
    //     loading.value = false
    // })
}
// 操作日志详情
const getOrderSpareLogList = async () => {
    loading.value = true
    let data = {
        "limit": pagination.value.size,
        "page": pagination.value.current
    }
    // await OrderSpareLogList(data, partsId.value).then(res => {
    //     if (res.data.success) {
    //         detailDataLog.value = res.data.data.rows
    //         totalList.value = Number(res.data.data.total)
    //     } else {
    //         ElMessage({
    //             showClose: true,
    //             message: res.data.message,
    //             duration: 4000,
    //             offset: 200,
    //             type: 'error'
    //         })
    //     }
    //     loading.value = false
    // })
}
// 配件详情
const getOrderSpareMaterialList = async (id) => {
    // await getOrderSpareMaterial(id).then(res => {
    //     if (res.data.success) {
    //         feeDetails.value = res.data.data.rows
    //     } else {
    //         ElMessage({
    //             showClose: true,
    //             message: res.data.message,
    //             duration: 4000,
    //             offset: 200,
    //             type: 'error'
    //         })
    //     }
    // })
}
// 关闭
const onCancel = () => {
    emits('assign-dialog')
}
// 查看图片
const handlePictureCardPreview = (img, val) => {
    dialogImageUrl.value = img
    dialogVisible.value = true
    isPdf.value = val
}
onMounted(async () => {
    if (partsId.value) {
        await getOrderSpareDetailProjectInfo(partsId.value)
        await getOrderSpareMaterialList(partsId.value)
    }
})
const handleClick = (val) => {
    switch (val) {
        case 'first':
            getOrderSpareMaterialList(partsId.value)
            break;
        case 'second':

            break;
        case 'third':
            getOrderSpareLogList()
            break;
    }

}
</script>
<style lang="scss" scoped>
.title_top {
    border-left: 2px solid #007cff;
    line-height: 14px;
    padding-left: 6px;
    margin-bottom: 8px;
}

.table-detail {
    margin: 10px 8px;
}

:deep(.form_detail) {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .dis_f {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .mag-l {
            margin-left: 200px;
        }
    }

    .el-form-item__label {
        color: #999;
        font-size: 12px;
    }

    .el-form-item__content {
        font-size: 12px;
    }
}

.pagination {
    margin-top: 8px;
}

.footer_btn {
    display: flex;
    justify-content: end;
    align-items: center;
}

.disf_ipc {
    display: flex;

    p {
        width: 40px;
        height: 40px;
        margin-right: 6px;
        border: 1px solid #7f7f7f27;
        border-radius: 2px;
        box-sizing: border-box;

        .img {
            width: 100%;
            border-radius: 2px;
            cursor: pointer;
        }
    }

}

.coloe {
    margin-top: 10px;
    text-align: right;
}

@import '../index.scss'
</style>